import Loading from "@/component/loading/loading";
import Zempty from "@/component/zc-empty/zc-empty";
import { adBarChart, colChart, funnelChart, lineChart, pieChart } from "@/utils/echarts";
import React, { useLayoutEffect } from "react";
import { useRef } from "react";
import { useEffect } from "react";
import { useState } from "react";
import styles from "./zuiEchart.module.scss"

const ZuiEchart = (
    // API说明
    {
        unit="",
        toFixed=false,//是否保留2位小数
        message,
        condition = { condition },//条件
        loading = false,
        addTooltip = false,//是否自定义tooltip
        // tooltipData,//真实率完整率要用的
        hideTitle = false,//隐藏标题
        titleCenter = false,//标题居中
        hideHeader = false,//隐藏卡片header头
        title = "zuiEchart",//卡片标题
        hideBtn = false,//隐藏切换按钮
        hideDownBtn = true,//隐藏下载按钮
        btn = [],//按钮名称
        data = [{
            // "data": [
            //     {
            //         "value": getRandomMath(1000, 98884),
            //         "name": "随机数据1"
            //     },
            //     {
            //         "value": getRandomMath(1000, 98884),
            //         "name": "随机数据2"
            //     },
            //     {
            //         "value": getRandomMath(1000, 98884),
            //         "name": "随机数据3"
            //     }
            // ]
        }],//两个对象数组

        defaultModule, //默认显示的模块 不传则为"pie" "bar" "adBar" "line"
        pieType,//扇形图类型，默认不传是饼图，传2是环形图
        showLegend = true,//是否显示echart副标题，不传则为false
        useXis,//是否使用自己的横轴名称，不传则使用写死的
        area, //折线图是否显示阴影 不传则为false
        style,//样式
        childrenPosition = "bottom",
        children = false, //默认没有children属性
        childrenWidth,//children元素位置宽度，仅childrenPosition为right/left的时候才会生效。
        authSwitch = false,//是否自动切换年还是月？
        subtitle = "",
        echartOptions={}
    }
) => {
    const [showModule, setShowModule] = useState(defaultModule || "bar");//默认显示分布图，bar则是条形图
    const [current, setCurrent] = useState(0);


    const [size, setSize] = useState([0, 0]);
    useLayoutEffect(() => {
        function updateSize() {
            setSize([window.innerWidth, window.innerHeight]);
        }
        window.addEventListener('resize', updateSize);
        updateSize();
        return () => window.removeEventListener('resize', updateSize);
    }, [])


    // 监听条件中 如果是年类型，则切换显示年，否则切换到月；
    useEffect(() => {
        if (authSwitch) {
            const { dateType } = condition;
            // console.log("监听到年月条件变化", dateType)
            // alert("监听到年月条件变化" + dateType)
            switch (dateType) {
                case "tYear": setCurrent(0); break;
                default: setCurrent(1);
            }
        }
    }, [condition])




    const chartRef = useRef(null);//图表dom节点

    // 根据模块显示echart
    const showEchart = (empty) => {
        switch (showModule) {
            case "pie": pieChart({
                event: chartRef.current,
                title: title,
                state: data[current],
                type: pieType,
                showLegend: showLegend,
                useXis: useXis,
                toFixed:toFixed,
                unit:unit,
                echartOptions,
            }); break;
            case "bar": colChart({
                event: chartRef.current,
                state: data[current],
                showLegend: showLegend,
                useXis: useXis,
                toFixed:toFixed,
                unit:unit,
                echartOptions,
            }); break;
            case "adBar": adBarChart({
                event: chartRef.current,
                state: data[current],
                showLegend: showLegend,
                useXis: useXis,
                empty: empty,
                toFixed:toFixed,
                unit:unit,
                echartOptions,
            }); break;
            case "line": lineChart({
                event: chartRef.current,
                state: data[current],
                useXis: useXis,
                showLegend: showLegend,
                area: area,
                toFixed:toFixed,
                unit:unit,
                echartOptions,
            }); break;
            case "funnel": funnelChart({
                event: chartRef.current,
                state: data[current],
                toFixed:toFixed,
                unit:unit,
                echartOptions
            }); break;
            default: console.log("none")
        }
    }


    const [none, setNone] = useState(false);
    useEffect(() => {
        // 监听下，如果data[current]没有数据，则显示无数据，否则去显示echart图表
        if (data[current]?.data?.length === 0) {
            console.log("无数据")
            setNone(true)
        } else {
            showEchart(false)
        }
    }, [data, current, showModule, title, pieType, showLegend, size])


    // 判断children元素在上面还是在下面
    const getPosition = () => {

        if (childrenPosition === "top") {
            return (
                <>
                    <div className={styles.card_container}>
                        {
                            children === false ? null :
                                <div className={styles.card_children}>
                                    {children}
                                </div>

                        }
                        {
                            <Zempty show={(data[current].data.length === 0 && loading === false) ? true : false} message={message} />
                        }
                        <div className={styles.chartDom} ref={chartRef} style={{ display: (data[current].data.length === 0 && loading === false) ? "none" : "block" }}></div>
                    </div>

                </>
            )
        } else if (childrenPosition === "bottom") {
            return (
                <>
                    <div className={styles.card_container}>
                        {
                            <Zempty show={(data[current].data.length === 0 && loading === false) ? true : false} message={message} />
                        }
                        <div className={styles.chartDom} ref={chartRef} style={{ display: (data[current].data.length === 0 && loading === false) ? "none" : "block" }}></div>
                        {
                            children === false ? null :
                                <div className={styles.card_children}>
                                    {children}
                                </div>

                        }
                    </div>
                </>
            )
        } else if (childrenPosition === "right") {
            return (
                <>
                    <div className={styles.card_container} style={{ flexDirection: "row" }}>
                        {
                            <Zempty show={(data[current].data.length === 0 && loading === false) ? true : false} message={message} />
                        }
                        <div className={styles.chartDom} ref={chartRef} style={{ display: (data[current].data.length === 0 && loading === false) ? "none" : "block" }}>

                        </div>
                        {
                            children === false ? null :
                                <div className={styles.card_children}
                                    style={{ width: (childrenPosition === "right" || childrenPosition === "left") ? childrenWidth : "100px", height: "100%" }}
                                >
                                    {children}
                                </div>

                        }
                    </div>
                </>
            )
        } else {
            return (
                <>
                    <div className={styles.card_container} style={{ flexDirection: "unset" }}>

                        {
                            children === false ? null :
                                <div className={styles.card_children}
                                    style={{ width: (childrenPosition === "right" || childrenPosition === "left") ? childrenWidth : "100px", height: "100%" }}
                                >
                                    {children}
                                </div>

                        }
                        {
                            <Zempty show={(data[current].data.length === 0 && loading === false) ? true : false} message={message} />
                        }
                        <div className={styles.chartDom} ref={chartRef} style={{ display: (data[current].data.length === 0 && loading === false) ? "none" : "block" }}>
                        </div>
                    </div>
                </>
            )
        }
    }

    return (
        <>
            <div className={styles.card} style={{ ...style }}>
                <Loading loading={loading}>
                    <div className={styles.card_center}>
                        {
                            hideHeader ? null :
                                <div className={styles.card_header}>
                                    <div className={styles.header_title} style={{ textAlign: titleCenter ? "center" : null }}>
                                        {title = hideTitle ? "" : title}
                                        <span className={styles.subtitle}> {subtitle}</span>
                                    </div>
                                    <div className={styles.header_btn}>

                                        {
                                            btn.map((item, index) => {
                                                if (hideBtn) {
                                                    return false;
                                                } else {
                                                    return (
                                                        <span onClick={() => setCurrent(index)} className={styles.header_btn_item} key={index} style={{ backgroundColor: current === index ? "dodgerblue" : "" }}>{item}</span>
                                                    )
                                                }

                                            })
                                        }
                                    </div>
                                </div>
                        }
                        {
                            getPosition()
                        }
                    </div>
                </Loading>
            </div>
        </>
    )
}
export default ZuiEchart;